<template>

  <el-form :model="form" :inline="inline" :label-width="labelWidth ?( labelWidth +'px') :  '73px'"
    label-position="right">
    <div  style="float: left;height: 35px">
    <el-form-item v-if="showAddButton || showExportButton">
      <el-button v-if="showAddButton" class="buttonStyle" type="success" v-permission="addPer" @click="handleDataInsert"
        style="text-align: center">{{addTitle}}</el-button>
      <el-button v-if="showFinanceButton" class="buttonStyle" type="info" v-permission="financePer"
        @click="handlefinance" style="text-align: center">{{financeTitle}}</el-button>
      <el-button v-if="showExportButton" class="buttonStyle" type="warning"
        @click="handleDataExport" style="text-align: center">导出</el-button>
        <!-- v-permission="excelPer"  20200203 智修车间  注释导出按钮权限  -->
    </el-form-item>
    </div>
    <div style="float: right;">
      <slot :form="form" />
      <el-form-item  v-if="showSearchButton || showSendButton || url">
        <el-button v-if="showSearchButton" class="buttonStyle" type="danger" v-permission="selectPer"
          @click="handleSearch">查询</el-button>
        <el-button v-if="showSendButton" class="buttonStyle" type="danger" @click="handleSend">{{sendButtonTitle}}</el-button>
        <el-upload v-if="url" class="inline-block" :action="url">
          <el-button type="danger" class="buttonStyle">导入</el-button>
        </el-upload>
      </el-form-item>
    </div>
  </el-form>

</template>
<script>
  export default {
    name: 'SerachPanel',
    props: {
      showSearchButton: {
        type: Boolean,
        default: true
      },
      showAddButton: {
        type: Boolean,
        default: false
      },
      showExportButton: {
        type: Boolean,
        default: false
      },
      showFinanceButton: {
        type: Boolean,
        default: false
      },
      url: {
        type: String,
        default: ''
      },
      showSendButton: {
        type: Boolean,
        default: false
      },
      labelWidth: {
        type: String,
        default: '73'
      },
      addPer: {
        type: String,
        default: '0'
      },
      excelPer: {
        type: String,
        default: '0'
      },
      selectPer: {
        type: String,
        default: '0'
      },
      financePer: {
        type: String,
        default: '0'
      },
      addTitle: {
        type: String,
        default: () => {
          return "新增"
        }
      },
      financeTitle: {
        type: String,
        default: () => {
          return "财务封帐"
        }
      },
      sendButtonTitle:{
        type: String,
        default: () => {
          return "发送通知"
        }
      }
    },
    data() {
      return {
        inline: true,
        form: {}
      }
    },
    methods: {
      handleSearch() {
        this.$emit('search', this.form)
      },
      handleDataInsert() {
        this.$emit('insert')
      },
      handlefinance() {
        this.$emit('finance')
      },
      handleDataExport() {
        this.$emit('export')
      },
      handleSend() {
        this.$emit('send')
      }
    }
  }

</script>
<style lang="scss" scoped>
  .inline-block {
    display: inline-block;
    margin-left: 10px;
  }

  .buttonStyle {
    // background: linear-gradient(90deg, #6B32CC, #E6255B);
    // background-color: #fff;
    border: 0px;
    // max-width: 120px;
    // width: 120px;
    text-align: center;
  }
  .el-form-item-button{
    margin-bottom: 0;
  }

</style>
